<template>
	<view>
		<view class="container">
			<view class="tui-wallet__box">
				<view class="tui-content__box">
					<view class="tui-my__assets">
						<text>我的资产</text>
						<image @tap="toggle" mode="widthFix"
							:src="'/static/images/mall/'+(isShow?'img_show_3x.png':'img_hide_3x.png')"></image>
					</view>
					<view class="tui-assets__center">
						<view class="tui-item__box">
							<text>余额</text>
							<view v-if="isShow">￥<text class="tui-text__large">{{nowMoney}}</text></view>
							<view v-else><text class="tui-text__large">****</text></view>
						</view>
						<view class="tui-item__box" @tap="bankCard">
							<text>银行卡</text>
							<view v-if="isShow"><text class="tui-text__large">{{cardCount}}</text>张</view>
							<view v-else><text class="tui-text__large">****</text></view>
						</view>
						<view class="tui-item__box" @tap="coupon">
							<text>优惠券</text>
							<view v-if="isShow"><text class="tui-text__large">{{couponCount}}</text>张</view>
							<view v-else><text class="tui-text__large">****</text></view>
						</view>
					</view>
					<view class="tui-assets__bottom" v-if="chongzhi == 1">
						<view @tap='goPayment' style="color: #fff;">
							<text class='main-pic'></text>立即充值
						</view>
					</view>
					<view class="tui-tag__box" @tap="records">账单</view>
				</view>
				<view class="tui-recharge__box" v-if="payFaceToFace.length>0">
					<view class="tui-title">当面付记录</view>
					<block v-for="(item, index) in payFaceToFace" :key="index">
						<view class="tui-list-cell">
							<view class="tui-amount__box">
								<view class="tui-amount__title">支付成功：{{item.actualPrice}}元</view>
							</view>
							<view class="tui-amount__box">
								<view class="tui-amount__desc">{{item.addTime}}</view>
								<view class="tui-amount">支付成功：{{item.actualPrice}}元</view>
							</view>
							<view class="tui-badge tui-bg__appoint">
								<view class="tui-scale__text">{{item.shopsName || ''}}</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	export default {
		data() {
			return {
				isShow: true,
				nowMoney: '',
				payFaceToFace: [],
				cardCount: 0,
				couponCount: 0,
				chongzhi: 2
			}
		},
		onLoad: function(options) {
			var that = this;
			that.chongzhi = app.globalData.rechargeStatus
			that.nowMoney = options.now
			that.getMy()
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			this.getMy();
			// 隐藏导航栏加载框
			uni.hideNavigationBarLoading();
			// 停止下拉动作
			uni.stopPullDownRefresh();
		},
		methods: {
			toggle() {
				this.isShow = !this.isShow
			},
			records() {
				uni.navigateTo({
					url: '/pages/ucenter/records/records',
				})
			},
			getMy() {
				var that = this;
				util.request('coupon/userCount').then(function(res) {
					if (res.code === 0) {
						that.couponCount = res.data || 0
					}
				});
				util.request('user/payFaceToFaceList').then(function(res) {
					if (res.code === 0) {
						that.payFaceToFace = res.data
					}
				});
				util.request('user/getBankCard').then(function(res) {
					if (res.code === 0) {
						that.cardCount = res.data.length || 0
					}
				});
				util.request('coupon/userCount').then(function(res) {
					if (res.code === 0) {
						that.couponCount = res.data || 0
					}
				});
			},
			goPayment: function() {
				uni.navigateTo({
					url: '/pages/ucenter/chongzhi/chongzhi',
				})
			},
			coupon: function() {
				uni.navigateTo({
					url: '/pages/ucenter/coupon/coupon',
				})
			},
			bankCard: function() {
				uni.navigateTo({
					url: '/pages/ucenter/bankCard/bankCard',
				})
			}
		}
	}
</script>

<style>
	.tui-wallet__box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-content__box {
		width: 100%;
		height: 300rpx;
		border-radius: 24rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: linear-gradient(90deg, rgb(123 93 103), rgb(84 55 243));
		position: relative;
		box-shadow: 0 3rpx 20rpx rgba(235, 9, 9, 0.2);
	}

	.tui-my__assets {
		width: 100%;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;

	}

	.tui-my__assets image {
		width: 36rpx;
		height: 28rpx;
		margin-left: 16rpx;
		display: block;
	}

	.tui-assets__center,
	.tui-assets__bottom {
		width: 100%;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.tui-item__box {
		width: 33.3333%;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
		flex-shrink: 0;
	}

	.tui-text__large {
		font-size: 35rpx;
		font-weight: bold;
	}

	.tui-assets__bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		padding-top: 16rpx;
		box-shadow: 0px -5px 10px -5px rgba(255, 255, 255, .3);
	}

	.tui-assets__bottom .tui-item__box {
		width: 25%;
		font-size: 24rpx;
		padding-bottom: 16rpx;
		opacity: 0.8;
	}

	.tui-assets__bottom .tui-text__large {
		font-size: 32rpx;
	}

	.tui-recharge__box {
		width: 100%;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		border-radius: 24rpx;
		background-color: #fff;
	}

	.tui-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		padding-bottom: 20rpx;
	}

	.tui-list-cell {
		width: 100%;
		height: 160rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #FFF0F1;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-amount__title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.tui-amount__desc {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.tui-amount__box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-amount {
		font-size: 26rpx;
		font-weight: 600;
		color: #333333;
		text-align: center;
		min-width: 142rpx;
		margin-left: auto;
	}

	.tui-badge {
		height: 32rpx;
		border-radius: 10rpx 0;
		font-size: 25rpx;
		font-weight: 400;
		color: #FFFFFF;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-bg__appoint {
		background: #58C1E7;
	}

	.tui-scale__text {
		width: 100%;
		text-align: center;
		transform: scale(0.8);
		transform-origin: center center;
	}

	.tui-tag__box {
		position: absolute;
		right: 0;
		top: 30rpx;
		border: 1rpx solid #fff;
		border-right: 0 !important;
		color: #fff;
		font-size: 24rpx;
		border-radius: 100rpx 0 0 100rpx;
		padding: 4rpx 16rpx;
		text-align: center;
	}

	.main-pic {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 11rpx;
		background-image: url("");
	}
</style>
